// import $ from './library/jquery.js';
//header
$(function () {
  $('.nav-list').on('mouseenter', 'li', function () {
    var index = $(this).index();
    timer = setTimeout(function () {
      $('.header-nav-menu').eq(index).slideDown(400);
      $('.nav-list li').on('mouseenter', function () {
        var index = $(this).index();
        $('.header-nav-menu').eq(index).show().siblings().hide();
      });
    }, 200);
  });
  $('.nav-list').on('mouseleave', function () {
    clearTimeout(timer);
    $('.header-nav-menu').slideUp(300);
  });

  $('.category-list').on('mouseenter', 'li', function () {
    var index = $(this).index();
    $('.cmenu').eq(index).show().siblings().hide();
  });
  $('.category-list').on('mouseleave', function () {
    $('.cmenu').hide();
  });

  $.ajax({
    type: 'get',
    url: '../../interface/getData.php',
    dataType: 'json',
    success: function (res) {
      console.log(res);
      let temp = '';

      res.forEach((elm, i) => {
        let picture = JSON.parse(elm.picture);
        // console.log(picture);
        temp += `<li class="item">
          <a href="./product.html?id=${elm.id}" class="clr">
            <img data-original="../${picture[0].src}" src= "../${picture[0].src}">
            <h3 class="img-title"> ${elm.title}</h3>
            <p class="img-t2">${elm.details}</p>
            <p class="img-t3">
              <span>${elm.price}元</span>
            </p>
          </a>
        </li>`;
        $('img.lazy').lazyload({ effect: 'fadeIn' });
      });

      $('.list-rightul').prepend(temp);
      $('img.lazy').lazyload({ effect: 'fadeIn' });
    },
  });
});
